SourceSync-Render

The Render Library is a powerful component of the SourceSync SDK that handles the creation and management of interactive overlays and user interfaces synchronized with your video content.

Installation

The Render Library is included in the main SourceSync SDK package:

 npm install sourcesync-sdk

Key Concepts

Activation View

An Activation View is responsible for rendering and managing interactive overlays on top of your video player.

Smartblock Renderer

The Smartblock Renderer is a pre-built renderer that can interpret and display complex interactive elements defined in the SourceSync dashboard.

Usage

First, import and create an Activation View:

import { initializeApp } from 'sourcesync-sdk/app';
import { createActivationView, useSmartblockRenderer } from 'sourcesync-sdk/render-activation-web';

const app = await initializeApp({
  appKey: 'YOUR_API_KEY',
  env: 'prod'
});

const activationView = createActivationView(app, activation, {
  el: '#overlay-container',
  renderer: useSmartblockRenderer({})
});

API Reference

createActivationView(app: SourceSyncApp, activation: Activation, options: ActivationViewOptions): ActivationView

Creates a new Activation View instance.

Parameters:

• app: The SourceSync app instance
• activation: The activation object to render
• options: Configuration options for the Activation View

Returns: An ActivationView instance

ActivationView

Methods:

• mount(): void: Mounts the activation view to the DOM
• unmount(): void: Unmounts the activation view from the DOM
• updateActivation(activation: Activation): void: Updates the current activation
• updateContext(context: object): void: Updates the context for the current activation

useSmartblockRenderer(options: SmartblockRendererOptions): Renderer

Creates a Smartblock Renderer instance.

Parameters:

• options: Configuration options for the Smartblock Renderer

Returns: A Renderer instance compatible with Activation View

Example Usage

import { initializeApp } from 'sourcesync-sdk/app';
import { createActivationView, useSmartblockRenderer } from 'sourcesync-sdk/render-activation-web';

async function setupInteractiveOverlay() {
  const app = await initializeApp({
    appKey: 'YOUR_API_KEY',
    env: 'prod'
  });

  const activation = await app.getActivation('your-activation-id');

  const activationView = createActivationView(app, activation, {
    el: '#overlay-container',
    renderer: useSmartblockRenderer({})
  });

  activationView.mount();

  // Listen for activation events
  activationView.on('activation', (data) => {
    console.log('Activation triggered:', data);
  });

  // Update context based on video playback
  video.addEventListener('timeupdate', () => {
    activationView.updateContext({ currentTime: video.currentTime });
  });

  // Clean up when done
  onUnmount(() => {
    activationView.unmount();
  });
}

setupInteractiveOverlay();

Best Practices

1. Always mount the Activation View after your video player is ready.
2. Update the activation context regularly to ensure synchronized behavior with your video.
3. Use the Smartblock Renderer for complex interactions defined in the SourceSync dashboard.
4. Implement proper cleanup by unmounting the Activation View when it's no longer needed.
5. Handle activation events to create custom behaviors in your application.

Custom Renderers

While the Smartblock Renderer covers most use cases, you can create custom renderers for unique requirements:

const customRenderer = {
  render(activation, context) {
    // Custom rendering logic
  },
  update(activation, context) {
    // Custom update logic
  },
  unmount() {
    // Custom cleanup logic
  }
};

const activationView = createActivationView(app, activation, {
  el: '#overlay-container',
  renderer: customRenderer
});

For more advanced usage and integration with the Moment Library, refer to the Moment Library documentation and the SourceSync API reference.